<template>
  <el-row class="wrap">
    <el-col :span="24" class="wrap-breadcrumb">
      <div class="ibox">
        <div class="box-a">
          <div id="container" style="width: 100%;height: 100%"></div>
          <div class="showOrders" v-show="isOpen"  @scroll="scrollEvent">
              <div class="midContent" v-for="(item,index) in ordersList" :key="index" @click="openOrders(item)">
                <div class="midTop">
                  <div class="midTime">
                    <img src="@/assets/image/time.png">
                    <span style="color: red" v-if="item.distType == '10'">{{item.distTime}}</span>
                    <span style="color: red" v-if="item.distType == '20'">{{item.pickTime}}</span>
                    <span>内送达</span>
                  </div>
                  <div class="orderNoc">
                    #{{item.ordersId}}
                  </div>
                </div>
                <div class="midView">
                  <div class="getView">
                    <div class="getLeft">
                      <img src="@/assets/image/get.png">
                    </div>
                    <div class="getRight">
                      {{item.shop.province}}{{item.shop.city}}{{item.shop.area}}{{item.shop.address}}
                    </div>
                  </div>
                  <div class="getView" style="margin-top: 15px;padding-bottom: 10px">
                    <div class="getLeft">
                      <img src="@/assets/image/send.png">
                    </div>
                    <div class="getRight"  v-if="item.distType == '10'">
                      {{item.ordersAddress.addressInfo}}{{item.ordersAddress.addressHouse}}
                    </div>
                    <div class="getRight"  v-if="item.distType == '20'">
                      {{item.ordersPoint.province}}{{item.ordersPoint.city}}{{item.ordersPoint.area}}{{item.ordersPoint.address}}
                    </div>
                  </div>
                </div>
                <div class="lineV">
                </div>
              </div>
              <div v-show="showData===0" style="text-align: center;font-size: 12px;padding: 10px">没数据了</div>
          </div>
<!--          <div class=" showClose" :class="{'el-icon-arrow-left':isOpen === true,'el-icon-arrow-right':isOpen === false}" @click="showClose"></div>-->
        </div>

      </div>
    </el-col>
  </el-row>
</template>
<style>
  .refreshIcon {
    width: 17px;
    height: 17px;
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
  }

  .refreshIcon:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }

  .refreshIcon > img {
    width: 100%;
    height: 100%;
  }

  .headClass {
    height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .headContent {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: #999999;
  }

  .lineV {
    background: #e6e6e6;
    width: 100%;
    height: 8px;
  }

  .headText {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #333333;
  }

  .headState {
    width: 20px;
    height: 4px;
    background: #6FB249;
    border-radius: 2px;
    position: absolute;
    bottom: 0;
  }

  .showOrders {
    width: 400px;
    padding: 20px 20px 0px 20px;
    position: absolute;
    top: 0px;
    background: #e6e6e6;
    box-shadow: gainsboro;
    height: 100%;
    overflow-y: auto;
    z-index: 9999;
  }
  .showClose{
    position: absolute;
    top: 47%;
    width: 20px;
    height: 50px;
    background-color: red;
    z-index: 99999;
    left: 400px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  /* 设置滚动条的样式 */
  .showOrders::-webkit-scrollbar {
    display: none;
  }


  .ibox {
    width: 100%;
    padding: 20px 20px;
    box-sizing: border-box;
    background-size: 100% 100%;
  }

  .box-a {
    margin-top: 20px;
    width: 100%;
    height: 800px;
    opacity: 0.8;
    position: relative;
  }

  .midContent {
    width: 100%;
    background: #ffffff;
    cursor: pointer;
  }

  .midTop {
    height: 44px;
    width: 100%;
    border-bottom: 1px solid #F5F9FC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    box-sizing: border-box;
  }

  .midTime {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .midTime > img {
    width: 24px;
    height: 24px;
  }

  .midTime > span {
    margin-left: 5px;
  }

  .midView {
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
  }

  .getLeft {
    display: flex;
    flex-direction: column;
  }

  .getLeft > img {
    width: 24px;
    height: 24px;
  }

  .getLeft > span {
    margin-top: 5px;
  }

  .getView {
    display: flex;
    width: 100%;
    align-items: center;
  }

  .getRight {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-left: 10px;
  }


</style>
<script>
  import Vue from 'vue'
  import VueAMap from 'vue-amap'
  import {
    listOrders,
    locationInfo
  } from '@/api/system/distributionConfig'

  Vue.use(VueAMap)
  VueAMap.initAMapApiLoader({
    // 高德的key
    key: '4437bf464130abaf0f784d66f030135d',
    // 插件集合
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],
    v: '1.4.4'
  });
  export default {
    name: "index",
    data: function () {
      return {
        active: 0,
        orderList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
        polyline: {},
        map: {},
        marker: [],
        speedCount: "",
        ParkCout: 0,
        LocationCount: 0,
        FatigueCount: 0,
        EmsCount: 0,
        isOpen:true,
        showData:-1,//有无数据
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        ordersList:[],
        markerInterval:null
      };
    },
    mounted() {
      //this.historyInit();
      //查询各个车辆的实时定位位置
      var that = this;
      setTimeout(function () {
        that.makerFunct();
      }, 500)

      this.getListOrders();
    },
    methods: {
      openOrders(row){
        let that = this;
        for(var i = 0;i < this.marker.length;i++){
          this.marker[i].setMap(null);
        }
        this.marker = [];
        if (this.markerInterval != null){
          clearInterval(this.markerInterval);
          this.markerInterval = null;
        }


        this.map.setCenter([row.shop.lng,row.shop.lat])
        this.addMarker([row.shop.lng,row.shop.lat],'http://gsd.ahqgxx.com/orders/shop_point.png');
        this.addMarker([row.courier.lng,row.courier.lat],'http://gsd.ahqgxx.com/orders/courier_point.png');
        if (row.distType === '10'){
          this.addMarker([row.ordersAddress.addressLng,row.ordersAddress.addressLat],'http://gsd.ahqgxx.com/orders/member_point.png');
        }
        if (row.distType === '20'){
          this.addMarker([row.ordersPoint.lng,row.ordersPoint.lat],'http://gsd.ahqgxx.com/orders/member_point.png');
        }
        this.map.setFitView()

        this.markerInterval = setInterval(function () {
          locationInfo(row.ordersId).then(res=>{
            that.marker[1].setPosition([res.data.lng,res.data.lat]);
          });
        },3000);
        // this.map.setCenter([row.])
      },
      getListOrders(){
        listOrders(this.queryParams).then(res=>{
          this.showData = res.data.length;
          this.ordersList = this.ordersList.concat(res.data);
        });
      },
      showClose(){
        this.isOpen = !this.isOpen;
        var x = document.getElementById("showClose");
      },
      changeState(index) {
        this.active = index;
      },
      scrollEvent(e){
        if(e.currentTarget.scrollTop+e.currentTarget.clientHeight>=e.currentTarget.scrollHeight){
          this.queryParams.pageNum = this.queryParams.pageNum+1;
          this.getListOrders();
        }
      },
      //标注点
      makerFunct() {
        this.map = new AMap.Map("container", {
          zoom: 10,
          resizeEnable: true, //窗口大小调整
          center: [116.478935, 39.997761], //中心 firstArr: [116.478935, 39.997761],
        });
      },
      addMarker(position,icon) {
        let index = this.marker.length;
        this.marker[index] = new AMap.Marker({
          icon: new AMap.Icon({
                image: icon,
                size: new AMap.Size(50, 60),  //图标大小
                imageSize: new AMap.Size(50,60)
          }),  //图片ip
          position: position,
          offset: new AMap.Pixel(-13, -30),
          // 设置是否可以拖拽
          cursor: 'move',
          // 设置拖拽效果
          raiseOnDrag: true
        });
        this.marker[index].setMap(this.map);
      },


      //历史轨迹事件
      historyInit() {
        var _that = this;
        setTimeout(function () {
          _that.initMap();
          _that.initroad();
          //_that.startAnimation(
        }, 1000)
      },
      initMap() {
        this.map = new AMap.Map("container", {
          resizeEnable: true, //窗口大小调整
          center: this.firstArr, //中心 firstArr: [116.478935, 39.997761],
          zoom: 20
        });
        this.marker = new AMap.Marker({
          map: this.map,
          position: this.firstArr,
          icon: "https://webapi.amap.com/images/car.png",
          offset: new AMap.Pixel(-26, -13), //调整图片偏移
          autoRotation: true, //自动旋转
          angle: -90 //图片旋转角度
        });
      },
//初始化轨迹
      initroad() {
        //绘制还未经过的路线
        this.polyline = new AMap.Polyline({
          map: this.map,
          path: this.lineArr,
          showDir: true,
          strokeColor: "#28F", //线颜色--蓝色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 //线宽
          // strokeStyle: "solid"  //线样式
        });
        //绘制路过了的轨迹
        var passedPolyline = new AMap.Polyline({
          map: this.map,
          strokeColor: "#AF5", //线颜色-绿色
          //path: this.lineArr,
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6 //线宽
          // strokeStyle: "solid"  //线样式
        });
        this.marker.on("moving", e => {
          passedPolyline.setPath(e.passedPath);
        });
        this.map.setFitView(); //合适的视口
      },
      //历史事件动画
      startAnimation() {
        this.speedCount = 1;
        this.markerSpeed = 200;
        this.marker.moveAlong(this.lineArr, this.markerSpeed);
      }
    }
  }


</script>
